let Vue = null;
class VueRouter{
  constructor(options){
    //options  {mode routes}
    let {routes} = options;
    this.routeMap = {};// {'/':home,'/about':about}
    routes.forEach(item=>{
      this.routeMap[item.path] = item.component
    })
    this._route = location.hash.match(/#([^?]+)/)[1];
    // this._route = path;// / /about
    //this._route 需要跟着hash的改变而更新
    window.addEventListener('hashchange',()=>{
      // hash改变的时候 会触发这个函数
      this._route = location.hash.match(/#([^?]+)/)[1];
    })
    Vue.util.defineReactive(this,'_route','/')
    window.addEventListener('load',()=>{
      location.hash = location.hash || '/'
      this._route = location.hash.match(/#([^?]+)/)[1];
    })
  }
}
function install(_vue){
  Vue = _vue;
  Vue.mixin({
    beforeCreate() {
      if(this.$options.router){
        this.$router = this.$options.router
      }else if(this.$parent){
        this.$router = this.$parent.$router
      }
    },
  })
  Vue.component('router-link',{
    props:{
      to:{
        type:[String,Object],
        required:true
      }
      
    },
    render(h){
      return h('a',{
        class:'qqq',
        style:{color:'red'},
        attrs:{
          href:'#'+this.to
        }
      },this.$slots.default)
    }
  })
  Vue.component('router-view',{
    render(h){
      // router-view 组件要渲染的内容是跟 to对应的那个组件
      // /   Home
      // /about  about

      // 这里的this 是 router-view组件
      // 我们要的要的对应关系和路径都在router实例中存储
      // 由于每一个组件中都可以通过 tyhis.$router调用到router实例
      // 所以 我们可以通过this.$router.routeMap 获取
      return h(this.$router.routeMap[this.$router._route])
    }
  })

}
VueRouter.install = install
export default VueRouter